<template>
  <div>
    <my-breadcrumb :items="['统计分析', '用户基本信息统计']"/>
    <div class="conn">
      <div id="style" style="height: 400px;width: 100%;"></div>
      <div id="own" style="height: 400px;width: 100%;"></div>
      <div id="like" style="height: 400px;width: 100%;"></div>
      <div id="birthday" style="height: 400px;width: 100%;"></div>
      <div id="level" style="height: 400px;width: 100%;"></div>
      <div id="type" style="height: 400px;width: 100%;"></div>

      <div id="year" style="height: 400px;width: 100%;"></div>
      <div id="month" style="height: 400px;width: 100%;"></div>
      <div id="day" style="height: 400px;width: 100%;"></div>
    </div>
  </div>
</template>

<script>
import CLAZZ from '@/config/classify'
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/title')
export default {
  name: 'info-count',
  data () {
    return {}
  },
  methods: {
    getStyleCount () {
      let styleChart = echarts.init(document.getElementById('style'), 'light')
      let option = {
        title: [
          {
            text: '用户风格统计'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '用户数（人）'
        },
        series: [{
          name: '用户人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getstyle?type=1')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(CLAZZ.style[item.styleid - 1].name)
              option.series[0].data.push(item.num)
            })
            styleChart.setOption(option)
          }
        })
    },

    getOwnCount () {
      let ownChart = echarts.init(document.getElementById('own'), 'light')
      let option = {
        title: [
          {
            text: '用户拥有裙子数统计'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '用户数（人）'
        },
        series: [{
          name: '用户人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getstyle?type=2')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.skirtinum + '条裙子')
              option.series[0].data.push(item.num)
            })
            ownChart.setOption(option)
          }
        })
    },

    getLikeCount () {
      let likeChart = echarts.init(document.getElementById('like'), 'light')
      let option = {
        title: [
          {
            text: '用户爱好程度统计'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '用户数（人）'
        },
        series: [{
          name: '用户人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getstyle?type=3')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(CLAZZ.degreeid[item.degreeid - 1].name)
              option.series[0].data.push(item.num)
            })
            likeChart.setOption(option)
          }
        })
    },

    getBirthdayCount () {
      let birChart = echarts.init(document.getElementById('birthday'), 'light')
      let option = {
        title: [
          {
            text: '用户出生年统计'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '用户数（人）'
        },
        series: [{
          name: '用户人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getstyle?type=4')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.day + '年')
              option.series[0].data.push(item.num)
            })
            birChart.setOption(option)
          }
        })
    },

    getLevelCount () {
      let chart = echarts.init(document.getElementById('level'), 'light')
      let option = {
        title: [
          {
            text: '用户等级统计'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '用户数（人）'
        },
        series: [{
          name: '用户人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getlevelnum')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.level + '级')
              option.series[0].data.push(item.num)
            })
            chart.setOption(option)
          }
        })
    },

    getTypeCount () {
      let styleChart = echarts.init(document.getElementById('type'), 'light')
      let count = 0
      let result = {}
      let option = {
        title: [
          {
            text: '邀请、注册统计'
          }
        ],
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['label', '邀请人数（月）', '注册人数（月）'],
          source: [
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {
          name: '人数（个）'
        },
        series: [
          {type: 'bar'},
          {type: 'bar'}
        ]
      }
      this.axios.get('/Statistics/getmembernum')
        .then(res => {
          if (res.data.status === 1) {
            setCount(res.data.data, 'register')
          }
        })
      this.axios.get('/Statistics/getyqmember')
        .then(res => {
          if (res.data.status === 1) {
            setCount(res.data.data, 'invite')
          }
        })

      function setCount (res, key) {
        count++
        result[key] = res
        if (count === 2) {
          console.log(result)
          let temp = []
          result.register.forEach(item => {
            temp[item.day] = item
          })
          result.invite.forEach(item => {
            option.dataset.source.push({
              label: item.month,
              '邀请人数（月）': item.num,
              '注册人数（月）': temp[item.month].num
            })
            styleChart.setOption(option)
          })
        }
      }
    },

    getYearCount () {
      let styleChart = echarts.init(document.getElementById('year'), 'light')
      let option = {
        title: [
          {
            text: '登录次数（年）'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '人数（人）'
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getloginnum?type=3')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.day)
              option.series[0].data.push(item.num)
            })
            styleChart.setOption(option)
          }
        })
    },
    getMonthCount () {
      let styleChart = echarts.init(document.getElementById('month'), 'light')
      let option = {
        title: [
          {
            text: '登录次数（月）'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '人数（人）'
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getloginnum?type=2')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.day)
              option.series[0].data.push(item.num)
            })
            styleChart.setOption(option)
          }
        })
    },
    getDayCount () {
      let styleChart = echarts.init(document.getElementById('day'), 'light')
      let option = {
        title: [
          {
            text: '登录次数（日）'
          }
        ],
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: []
        },
        yAxis: {
          name: '人数（人）'
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: []
        }]
      }
      this.axios.get('/Statistics/getloginnum?type=1')
        .then(res => {
          if (res.data.status === 1) {
            res.data.data.forEach(item => {
              option.xAxis.data.push(item.day)
              option.series[0].data.push(item.num)
            })
            styleChart.setOption(option)
          }
        })
    }
  },
  mounted () {
    this.getStyleCount()
    this.getOwnCount()
    this.getLikeCount()
    this.getBirthdayCount()
    this.getLevelCount()
    this.getTypeCount()
    this.getDayCount()
    this.getMonthCount()
    this.getYearCount()
  },
  created () {
  }
}
</script>

<style scoped>
  .conn div{
    margin-bottom: 20px;
    border-bottom: 1px solid #666;
  }
</style>
